<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--设置移动端，缩放比例-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>欢迎登录</title>
    <!--引入semantic的css-->
    <link rel="stylesheet" type="text/css" href="../../static/css/semantic.min.css" th:href="@{/css/semantic.min.css}">
    <link rel="stylesheet" type="text/css" href="../../static/css/admin.css" th:href="@{/css/admin.css}">
    <!--    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/components/icon.min.css'>-->

</head>
<body background="https://img0.baidu.com/it/u=2923764599,526550115&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281">
<!--导航-->
<nav class="ui inverted attached segment m-padded-td-mini m-shadow-small">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <a href="#" th:href="@{/admin/index}">
                <h2 class="ui teal header item">管理后台</h2>
            </a>
            <!-- m-item为jquery语法，下面 -->
            <a href="#" th:href="@{/admin/blogs}" class="m-item item m-mobile-hide"><i class="home icon"></i>博客</a>
            <a href="#" th:href="@{/admin/types}" class="m-item item m-mobile-hide"><i class="idea icon"></i> 分类</a>
            <a href="#" th:href="@{/admin/tags}" class="m-item item m-mobile-hide"><i class="bookmark outline icon"></i>
                标签</a>
            <a href="#" th:href="@{/admin/search}" class="m-item item m-mobile-hide"><i
                    class="spinner icon"></i> 搜索</a>
            <div class="right menu-item menu item m-mobile-hide" th:if="${session.user}!=null">
                <div class="ui dropdown item">
                    <div class="text">
                        <img class="ui avatar image" src="../../static/images/wechat.png"
                             th:src="@{${session.user.avatar}}">
                        <span class="ui scroll-pane" th:text="${session.user.nickname}"> </span>
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" th:href="@{/admin/logout}" class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <!-- menu toggle为jquery语法，下面 -->
        <a href="#" class="menu toggle ui black icon button m-right-top m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </div>
</nav>
<div class="ui grid" style="padding-top: 3em !important; padding-left: 3.5em !important; padding-right: 3.5em !important;">
    <div class="ui card four wide column " style="max-width: 25em !important; height: 10em !important; margin: auto !important;">
        <div class="ui grid" style="padding-top: 10%">
            <i class="ui book large icon six wide column" style="padding-top: 8%" ></i> <!--style="padding-left:20%; padding-top: 20%;"-->
            <div class="ui seven wide column">
                <p class="segment"> 文章总量</p>
                <p class="segment" id="blog_number"> 888888888</p>
            </div>
        </div>
    </div>
    <div class="ui card four wide column " style="max-width: 25em !important; height: 10em !important; margin: auto !important;">
        <div class="ui grid" style="padding-top: 10%">
            <i class="ui eye large icon six wide column" style="padding-top: 8%" ></i> <!--style="padding-left:20%; padding-top: 20%;"-->
            <div class="ui five wide column">
                <p class="segment"> 浏览总量</p>
                <p class="segment" id="blog_views_number"> 888888888</p>
            </div>
        </div>
    </div>
    <div class="ui card four wide column " style="max-width: 25em !important; height: 10em !important; margin: auto !important;">
        <div class="ui grid" style="padding-top: 10%">
            <i class="ui comment large icon six wide column" style="padding-top: 8%" ></i> <!--style="padding-left:20%; padding-top: 20%;"-->
            <div class="ui five wide column">
                <p class="segment"> 评论总量</p>
                <p class="segment" id="comment_number"> 888888888</p>
            </div>
        </div>
    </div>
    <div class="ui card four wide column " style="max-width: 25em !important; height: 10em !important; margin: auto !important;">
        <div class="ui grid" style="padding-top: 10%">
            <i class="ui user circle large icon six wide column" style="padding-top: 8%" ></i> <!--style="padding-left:20%; padding-top: 20%;"-->
            <div class="ui five wide column">
                <p class="segment"> 用户总量</p>
                <p class="segment" id="user_number"> 888888888</p>
            </div>
        </div>
    </div>
</div>


<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<!--居中-->
<!--position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;-->
<!--<div class="segment" id="charts_views" style="padding-top: 10% !important; padding-left: 1% !important; width: 600px;height:500px;"></div>-->
<!--<div class="segment" id="charts_comments" style="padding-top: 10% !important; padding-left: 1% !important; width: 600px;height:500px;"></div>-->

<div class="ui grid">
    <div class="ui one wide column"></div>
    <div class="ui six wide column" id="charts_views" style="padding-top: 10% !important; padding-left: 1% !important; width: 600px;height:500px;"></div>
    <div class="ui two wide column"></div>
    <div class="ui six wide column" id="charts_comments" style="padding-top: 10% !important; padding-left: 1% !important; width: 600px;height:500px;"></div>
    <div class="ui one wide column"></div>
</div>
<!-- 引入 ECharts 文件 -->
<script src="../../static/js/sweetalert-dev.js" th:src="@{/js/sweetalert-dev.js}"></script>
<!--semantic同bootstrap,基于jquery开发的-->
<script src="../../static/js/jquery-3.5.1.min.js" th:src="@{/js/jquery-3.5.1.min.js}"></script>
<!--引入semantic的js-->
<script src="../../static/js/semantic.min.js" th:src="@{/js/semantic.min.js}"></script>
<!--echarts-->
<script src="../../static/js/echarts.min.js" th:src="@{/js/echarts.min.js}"></script>
<!--jquery语法-->
<script>
    /*点击时查看有无'm-mobile-hide'属性,没的话加上,有的话去除，移动端弹出菜单功能*/
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
    $('.ui.dropdown')
        .dropdown({
            on: 'hover'
        });
</script>

<script type="text/javascript">
    $(document).ready(function () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('charts_views'));
        myChart.showLoading();
        var CommentsChart = echarts.init(document.getElementById('charts_comments'));
        CommentsChart.showLoading();
        //数据加载完之前先显示一段简单的loading动画
        function initChartViews(){
            var mytime = new Date().toLocaleTimeString();
            var names = [];    //横坐标数组（实际用来盛放X轴坐标值）
            var values = [];    //纵坐标数组（实际用来盛放Y坐标值）
            $.ajax({
                type: "post",
                async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                // url: "http://localhost:8080/charts_views",    //请求发送到dataActiont处
                url: "[[@{/charts_views}]]",
                data: {},
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    console.log(mytime + ": 图表请求数据成功！");
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    if (result) {
                        for (var i = 0; i < result.length; i++) {
                            names.push(result[i].dayTime);
                            values.push(result[i].views);
                        }
                        myChart.hideLoading();    //隐藏加载动画
                        var option = {        //加载数据图表
                            title: {
                                text: '阅读（浏览）趋势'
                            },
                            tooltip: {},
                            //折线选择
                            legend: {
                                data:['阅读量']
                            },
                            xAxis: {
                                data: names
                            },
                            yAxis: {
                                minInterval: 1
                            },
                            series: [{
                                name: '阅读量',
                                type: 'line', //折线图
                                data: values
                            }]
                        };
                        myChart.setOption(option);
                    }
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    console.log(mytime + " 图表请求数据失败！");
                    //alert("图表请求数据失败!");
                    swal("数据加载出错", "快去联系大西瓜！", "error")
                    myChart.hideLoading();
                }
            });
        }
        function initChartComments(){
            var mytime = new Date().toLocaleTimeString();
            var names = [];    //横坐标数组（实际用来盛放X轴坐标值）
            var values = [];    //纵坐标数组（实际用来盛放Y坐标值）
            $.ajax({
                type: "post",
                async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                // url: "http://localhost:8080/charts_comments",    //请求发送到dataActiont处
                url: "[[@{/charts_comments}]]",
                data: {},
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    console.log(mytime + ": 图表请求数据成功！");
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    if (result) {
                        for (var i = 0; i < result.length; i++) {
                            names.push(result[i].dayTime);
                            values.push(result[i].views);
                        }
                        CommentsChart.hideLoading();    //隐藏加载动画
                        var option = {        //加载数据图表
                            title: {
                                text: '评论趋势'
                            },
                            tooltip: {},
                            //折线选择
                            legend: {
                                data:['评论量']
                            },
                            xAxis: {
                                data: names
                            },
                            yAxis: {
                                minInterval: 1
                            },
                            series: [{
                                name: '评论量',
                                type: 'line', //折线图
                                data: values
                            }]
                        };
                        CommentsChart.setOption(option);
                    }
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    console.log(mytime + " 图表请求数据失败！");
                    //alert("图表请求数据失败!");
                    swal("数据加载出错", "快去联系大西瓜！", "error")
                    CommentsChart.hideLoading();
                }
            });
        }

        function initTotalCount(){
            $.ajax({
                type: "post",
                async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                // url: "http://localhost:8080/charts_total_count",    //请求发送到dataActiont处
                url: "[[@{/charts_total_count}]]",
                data: {},
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    console.log(result)
                    console.log(result.blogNumber)
                    $("#blog_number").text(result.blogNumber)
                    $("#blog_views_number").text(result.blogViewsNumber)
                    $("#comment_number").text(result.commentNumber)
                    $("#user_number").text(result.userNumber)
                }
            });
        }

    //定时ajax操作
    setInterval(function () {
        initTotalCount();
        initChartViews();
        initChartComments();
    }, 1000);

    });

</script>

</body>
</html>